<template>
  <div class="addSceneWrap">
    <el-dialog title="新建场景" :visible.sync="dialogVisible" width="35%" v-loading="loading">
      <div class="content" style="margin-top: 20px;">
        <div class="tit tv-face-zzl">场景名称</div>
        <el-input v-model="sceneName" placeholder="场景名称，最多10个字符" class="sceneName"></el-input>
        <div class="tit tv-face-zzl">筛选条件</div>
        <FilterFields :form="filtersArr" :field-list="fieldOptions" @on-field-change="getError"
          @on-field-delete="handleDelete" ref="filterConditions" />
        <div type="text" class="tv-face-zzl" style="padding-right: 0;padding-left: 0;margin-top:16px" @click="handleAdd">
          添加筛选条件</div>
        <div class="save">
          <div class="save-setting">
            <el-checkbox v-model="setDefault">设置为默认</el-checkbox>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="btnSubmit">确 定</el-button>
        <el-button @click="dialogVisible = false" style="color: #5A607F;">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import FilterFields from '@/components/FieldFilters/AdvancedFilters/FilterFields'
import { queryField, addScene, updateScene } from "@/api/customer/common";
export default {
  name: 'clues',
  props: {
    addType: String,
  },
  data () {
    return {
      sceneName: '',
      loading: false,
      dialogVisible: false,
      //筛选项数组
      filtersArr: [
        {
          dataTypeOptions: [], //数据类型下拉
          valueOptions: [],
          columnField: "",
          dataType: "",
          dataTypeValue: "",
          value: "",
          multValue: [],
          startValue: "",
          endValue: "",
        },
      ],
      fieldOptions: [],
      errorTypes: ['筛选条件中有重复项！', '请选择筛选条件！'],
      errorType: 0,
      showErrors: false,
      setDefault: false,//设置默认
      option: undefined,

    }
  },
  components: {
    FilterFields
  },
  mounted () {

  },
  methods: {
    init (option) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.queryField();
      });
      if (option) {
        this.sceneName = option.name;
        this.option = option;
        var data = JSON.parse(JSON.stringify(option.data));
        this.filtersArr = [];
        this.filtersArr = JSON.parse(data);
      } else {
        this.sceneName = "";
        this.option = undefined;
        this.filtersArr = [
          {
            dataTypeOptions: [], //数据类型下拉
            valueOptions: [],
            columnField: "",
            dataType: "",
            dataTypeValue: "",
            value: "",
            multValue: [],
            startValue: "",
            endValue: "",
          },
        ]
      }
    },
    queryField () {
      queryField(this.addType).then(res => {
        this.fieldOptions = res.data;
      }).catch(error => {
        this.loading = false;
      });

    },
    btnSubmit () {
      let arr = JSON.parse(JSON.stringify(this.filtersArr));
      arr.forEach(element => {
        element.name = element.fieldName;
        let listValue = [];
        if (element.value) {
          listValue.push(element.value);
          element.value = listValue;
        }
      });

      var params = {
        type: this.addType,
        name: this.sceneName,
        isHide: 0,
        isDefault: 1,
        data: JSON.stringify(arr),
      }
      this.loading = true;
      if (this.option) {
        params.id = this.option.id;
        params.version = this.option.version;
        updateScene(params).then(res => {
          this.$emit("RefreshScene");
          this.loading = false;
          this.dialogVisible = false;
        }).catch(error => {
          this.loading = false;
        })

      } else {
        addScene(params).then(res => {
          this.$emit("RefreshScene");
          this.loading = false;
          this.dialogVisible = false;
        }).catch(error => {
          this.loading = false;
        })
      }



    },
    getFilterItem () {
      return {
        fieldName: '',
        name: '',
        formType: '',
        isOut: 0, // 外露
        condition: 'contains',
        type: 3,
        value: '',
        setting: [],
        typeOption: [],
        settingList: [],
        flowName: '', // 阶段名称
        settingName: '', // 流程名称
        address: {
          state: '',
          city: '',
          area: ''
        }
      }
    },
    handleAdd () {
      this.filtersArr.push(this.getFilterItem())
    },
    handleDelete (index) {
      this.$confirm('您确定要删除这一条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.filtersArr.splice(index, 1)
          this.getError()
        })
        .catch(() => { })
    },

    /**
    *获取错误
    */
    getError () {
      this.showErrors = false
      const fieldNames = []
      for (let index = 0; index < this.filtersArr.length; index++) {
        const item = this.filtersArr[index]
        if (item.fieldName === '' || item.fieldName === undefined || item.fieldName === null) {
          this.errorType = 1
          this.showErrors = true
          break
        } else if (fieldNames.includes(item.fieldName)) {
          this.errorType = 0
          this.showErrors = true
          break
        } else {
          fieldNames.push(item.fieldName)
        }
      }

      return this.showErrors
    },

  }
}

</script>
<style lang="scss" scoped>
.addSceneWrap {
  .content {
    padding: 0px 32px 22px 32px;
  }

  .tit {
    margin-bottom: 10px;
  }
  ::v-deep .el-input__inner{
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: 400;
  }

  .sceneName {
    width: 210px;
    padding-bottom: 15px;
  }

  .addBtn {
    color: #606266;
  }

  .save-setting {
    margin-top: 20px;
  }

  ::v-deep .el-checkbox__label {
    color: #606266 !important;
  }

  // .el-checkbox__inner{
  //   color:#606266 !important;
  // }
}
</style>